<template>
  <div>
    <!-- 头部 -->
     <header>
       <div class="top">
       <div class="head-lef"><van-icon class="van-icon1" name="arrow-left" size="20"  color="#fff" /> &nbsp; </div>
       <div class="head-cen">我的聚美</div>
       <div class="head-rig"><van-icon  class="van-icon2" name="wap-home-o" size="35" color="#fff" /></div>
       </div>
            <!-- 头像区域 -->
            <div class="tou">
                <img src="@/assets/top1.jpg" >
                
            </div>
            <div class="tou1">
                    <span>注册</span>
                    <span class="one"> | </span>
                <span>登录</span> 
            </div>

     </header>



          <main>

            <!-- 灰色区域 -->
          <div class="hui"> </div>
          
              <!-- 我的订单 -->
          <van-cell is-link @click="showPopup">  <van-icon size="18" name="description" /> &nbsp; 我的订单   
                            <span  class="dingdan">查看我的全部订单</span> </van-cell>  
          <van-popup v-model="show">请登录</van-popup>

                <van-grid id="dingdan2" >
                        <van-grid-item  class="cor" icon="pending-payment"    text="代付款" />
                        <van-grid-item  class="cor" icon="send-gift-o" text="待收货" />
                        <van-grid-item  class="cor" icon="chat-o" text="待评价" />
                        <van-grid-item  class="cor" icon="after-sale" text="退货/退款" />
                </van-grid>

                 <!-- 灰色区域 -->
          <div class="hui"> </div>

              <!-- 我的资产 -->
          <van-cell is-link  round=true   >  <van-icon name="balance-o" size="24" color="#a0a0a0" />  我的资产</van-cell>
          <div class="zichan">
            <span>现金券</span>
            <span>红包</span>
            <span>聚美余额</span>
            <span>礼品卡</span>
          </div>

        <!-- 灰色区域 -->
            <div class="hui"> </div>



            <van-cell is-link @click="showPopup"> <van-icon name="service-o"     size="22" /> &nbsp; 售后服务</van-cell>
            <van-popup v-model="show">请登录</van-popup>

            <van-cell is-link @click="showPopup"> <van-icon name="newspaper-o"   size="22" /> &nbsp; 意见反馈</van-cell>
            <van-popup v-model="show">请登录</van-popup>

            <van-cell is-link @click="showPopup"> <van-icon name="logistics"     size="22" /> &nbsp; 收货地址</van-cell>
            <van-popup v-model="show">请登录</van-popup>

            <van-cell is-link @click="showPopup"> <van-icon name="close"         size="22"/>  &nbsp; 退出登录</van-cell>
            <van-popup v-model="show">请登录</van-popup>

            <van-cell is-link @click="showPopup"> <van-icon name="phone-o"       size="22"/>  &nbsp; 400-011-0888</van-cell>

          </main>
    <!-- 底部区域 -->
          <footer id="di">
          <div class="di2">  在线客服的服务时间8:00-20：00 0   </div> 
          </footer>

<!-- 撑盒子 -->
          <div class="cheng">

          </div>
  </div>
</template>

<script>
export default {
    data() {
      return {
      }
     
    },
     methods:{
        showPopup(){
          console.log(111);
        },
        // show(){
        //   console.log(222);
        // }

      },
}
</script>

<style scoped>
html,body{
  height: 100%;
   background-color: #f2f2f2;
}


  /* 粉色的主体区域 */
  header{
    width: 100%;
    height: 170px;
    background-color: #fd4f74;
    
  }

  /* 头部  三角和 字体 和小房子   */
  .top{
    width: 100%;
    height: 37px;
  }
  header >.top > .head-lef{
    float: left;
  }

  /* 左边的小箭头 */
  header >.top > .head-lef  > .van-icon1{
    padding-top: 10px;
    font-weight:700 ;
  }

 /* 左边的小箭头 */
  header >.top > .head-lef  > .van-icon2{  
    padding-top: 10px;
    font-weight:200 ;
  }

  header >.top > .head-cen{
    width: 310px;
    text-align: center;
    line-height: 38px;
    float: left;
    font-size: 16px;
    color: #fff;
  }
  /* 头像区域 */
  .tou{
    width: 70px;
    height: 70px;
    margin: 0 auto;
    margin-top: 20px;
  }
  .tou >img{
    width: 70px;
    height: 100%;
     
  }
  /* 登陆 注册 */
    .tou1{
      width:200px;
      height:60px;
      margin: 0 auto;
      margin-top: 10px;
      box-sizing: border-box;
    }
  .tou1 > span{
   color: #fff;
    font-weight: 700;
    font-size: 20px;
    margin: 0 16px;
    
  }
  /* 灰色区域 */
  .hui{
    width: 100%;
    height: 14px;
    background-color: #f2f2f2;
  }

  /* 订单 */
  .van-cell{
    font-size: 16px;
    border-bottom: 1px solid gray;
  }
  .dingdan{
   margin-left: 90px;
   color: #ccc;
  }

  /* 图标颜色 */
  .cor{
    color: #767676;
   
  }
 #dingdan2 > .van-grid-item > .van-grid-item__content > .van-grid-item__text {
      font-size: 18px;
  }

  /* 我的资产 */
  .zichan{
 display: flex;
     height: 50px;
      
  }
  .zichan >span{
      flex: 1;
      font-size: 15px;
      color: #666;
      text-align: center;
      line-height: 50px;
   
  }
  /* 底部 */
  #di{
    width: 100%;
    height: 71.5px;
    background-color: #f2f2f2;
  }
  #di >.di2{
    width: 100%;
    height: 72px;
    color: #999;
    font-size: 14px;
     background-color: #f2f2f2;
      padding: 15px;
     box-sizing: border-box;
  }

  .cheng{
    height: 30px;
  }
</style>